<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue样式</title>
</head>
<body>
    <!-- <p>sdfd<strong>ltk</strong>fdfdfdffdfdfd</p> -->
    <!-- <p>设置文本样式1</p>
    <strong>dfdfdggadfdf</strong>
    <div class="div01">设置字体</div>
    <style>  
     p {

      text-align: left;  /*设置文本水平对齐方式 */
      text-indent: 200px;  /*设置文本缩进 */
     line-height:100px;     /*设置文本行高*/
     font-size:30px;        /* 设置字体大小*/
     letter-spacing:30px   /*字符间距*/
     }
    
    .div01 {
        /* display: inline-block; */
        background-color: azure;
        /* background-image: url(./images/twoCode.png); */
        border: 2px,solid,blue;
        border-radius: 10px;
    }

        .inline-block-example {  
            display: inline-block;  
            width: 100px;  
            height: 50px;  
            background-color: lightblue;  
            margin: 5px;  
            padding: 10px;  
        }  
        
        .img1{
            width: 150px;
            height: 150px;
        }

        table{
            width: 500px;
            border: 2px,solid,black;
        }

        table td{
            border:2px,solid,black;
            background-color: black;
            color: white;
            text-align: center;
        }

        table td:hover{
            background-color: yellow;
            color: black;
        }

    </style>  
   
    <div class="inline-block-example">内联块级元素dfd</div>  
    <div class="inline-block-example">示例ssssssssss</div>
    <img class="img1" src="./images/twoCode.png"  alt="温馨提示" title="二维码描述" />
    <div>
        <table>
            <tr>
                <td>aaaa</td>
                <td>bbbb</td>
                <td>cccc</td>
                <td>dddd</td>
            </tr>
        </table>
    </div> -->
    <!-- <div class="div02"></div>
    <div class="div03"></div>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .div02{
            border: 2px solid black;
            height: 100px;
            width: 100px;
        }
        .div03{
            border: 2px solid black;
            height: 100px;
            width: 100px;
            /* position: relative;  相对定位，相对于原来的位置定位
            left: 100px;
            top:100px */

            /* position:absolute;   绝对定位，相对于body的左上角原点定位
            left: 50px;
            top:50px; */

            如果父级元素选择了相对定位,那么子级元素的绝对定位以父级元素的左上角原点定位。

            绝对定位和固定定位的元素会脱离文档流，而相对定位的元素不会脱离文档流
        } -->   
   <!-- </style> -->

   <div class="div01"></div>
   
        <div class="div02"></div>
        <p>sdfdfdfdfdfsdfdfdfsdfdfsdfdfsdfsdfsdfdf</p>
        <p>sdfdfdfdfdfsdfdfdfsdfdfsdfdfsdfsdfsdfdf</p>

        <p>sdfdfdfdfdfsdfdfdfsdfdfsdfdfsdfsdfsdfdf</p>

        <p>sdfdfdfdfdfsdfdfdfsdfdfsdfdfsdfsdfsdfdf</p>

        <p>sdfdfdfdfdfsdfdfdfsdfdfsdfdfsdfsdfsdfdf</p>

        <p>sdfdfdfdfdfsdfdfdfsdfdfsdfdfsdfsdfsdfdf</p>

        <p>sdfdfdfdfdfsdfdfdfsdfdfsdfdfsdfsdfsdfdf</p>

        <div class="div03"></div>

        <style>
*{
    margin: 12;
    padding: 5;
}

            .div01{
                border: 2px solid black;
            height: 100px;
            width: 100px;
            background-color: red;
            /* float: right; */
            }
            .div02{
                border: 2px solid black;
            height: 100px;
            width: 100px;
            background-color: black;
            float: right;
            }
            /* .div03{
                border: 2px solid black;
            height: 100px;
            width: 100px;
            background-color: yellow;
            float: right;
            } */
        </style>
<!-- <div style="height: 5000px;"></div>
<div class="div01"></div>

<style>

.div01{
    position: fixed;
    top:300px;
    left: 500px;
    height: 100px;
    width: 100px;
    background-color: red;
} -->

</style>
</body>
</html>